@charset "utf-8";
body{min-width: 1280px;}
.clearfix:after{content: "";
    display: block;
    clear: both;}

#web{width: 100%;height: 100%;}


.banner-img{
    width: 100%;
    height: 220px;}
.banner-img img{
    width: 100%;
    height: 100%;}

.kinds{
    width: 980px;
    height: 302px;
    margin: 0 auto;
.kinds-tittle{
    width: 100%;
    margin-top:21px;
    margin-left: 9px;
        span{ font-size: 14px;
                a{color: #000000;}}
}
.kinds-ul{
    width: 100%;
    margin-top: 31px;
        ul li{
            float: left;
            width: 222px;
            text-align: center;
            line-height: 100px;
            height: 129px;
            background: #cac9c9;
            margin-left: 7px;       
               a{ color: black;
                   display: block;
                   width: 222px;
                   height: 129px; 
                   transition: 3s;
                   
                } 
                a:hover{ 
                    transform:rotate (360deg);
                    color: #FFFFFF;
                    background: #2072f9;
                } 
                }
        
        li:first-child{
            margin-left: 0px;
            display: block;
            width: 292px;
            height: 129px;
            text-align: center;
            background: #2072f9;
        a{  display: block;
             width: 292px;
            height: 129px;
           color: #FFFFFF; 
        }
}}
 
.heade-search{
    width: 358px;
    height: 48px;
    background: #434343;
    border: 1px solid #000;
    margin-top: 29px;
        input{vertical-align: middle;}
        input[type="text"]{
                border:none;
                width: 300px;
                height: 48px;
                text-indent: 6px;}
       input[type="image"]{background: #434343;
                        vertical-align: middle;}
}}


.production{
    width: 976px;
    background: #FFFFFF;
    margin: 0 auto;
    
table{
        width: 976px;
        height: 803px;
        margin:0 auto;
        text-align: center;
            tr td{
                width:325px ;
                height: 266px;
                border: 1px solid #dcdcdc;
                    div{
                        width: 159px;
                        height: 159px;
                        margin: 0 auto;    
                        img{width: 100%;
                            height: 100%; } }
                    span{font-size: 16px;
                        display: block;
                        line-height: 33px;
                        color: #3c7ef9;}
                    p{font-size: 12px;}              
}}}

.page-ul{
    width: 530px;
    height: 48px;
    margin: 0 auto;
    margin-top: 55px;
        li{
            float: left;
            display: block;
            width: 60px;
            height: 48px;
            padding-left: 2px;
            text-align: center;
            line-height: 48px;
                a{display: block;
                    color: #000000;
                    width: 60px;
                    height: 48px;
                    transition: all 3s;}
                a:hover{color: #FFFFFF;
                    background: #3c7ef9;
                     border-radius: 25%;
                     transform: rotate(180deg);}
}}
